<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-icons/bootstrap-icons.css">
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/bootstrap.bundle.js"></script>
    <style>
        #header-hei {
            font-size: 14px;
        }

        #header-tui {
            font-size: 12px;
            padding-top: 8px;
            padding-bottom: 0px;
        }

        .btn {
            border-radius: 25px;
            font-size: 15px;

        }

        #wenzi {
            font-size: 12px;

        }

        #toutou {
            font-size: 10px;
        }

        #oi {
            font-size: 10px;
        }

        #nin {
            font-size: 24px;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div style="background-color: #1f1f1f; ">
        <div class="container w-100 " id="header-hei">
            <ul class="class ">
                <div class="row d-flex justify-content-between">
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                            href="">我的音乐</a></li>
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                            href="">发现音乐</a></li>
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white" href="">关注</a>
                    </li>
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white" href="">商城</a>
                    </li>
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                            href="">音乐人</a></li>
                    <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white" href="">推歌</a>
                    </li>

                    <!--搜索框-->
                    <form class="form-inline my-4 mx-3 my-lg-0">
                        <div class="input-group-append" style="margin-top: 9px;">
                            <input class="form-control mr-sm-2 " style="margin-top: 9px;" type="search "
                                placeholder="搜索" aria-label="Search">

                            <button class=" btn btn-outline my-sm-0 border-white text-white"><small>创作者中心</small>
                            </button>
                            <button class=" btn btn-outline  my-sm-1 border-auto text-white">
                                <small><a class="text-white " style="margin-top: 9px;" href="denglu.html">登录</a></small>
                            </button>
                    </form>
                </div>
            </ul>
        </div>
        <div style="background-color: #b30404; ">.</div>
    </div>

    <!--我的视频-->
    <div class="container border">
        <div class="row d-flex">
            <!--我的视频-->
            <div class="col-3 border">
                <h6 class="my-4"><strong>我的视频(113)</strong></h6>
                <i class="bi bi-triangle"></i><strong>创建的歌单</strong>
                <div class="media">
                    <img src="https://p1.music.126.net/R0ZxjtNEhX4v4ynTRIKeiQ==/109951165455068302.jpg?param=40y40"
                        class="mr-3 w-25" alt="...">
                    <div class="media-body">
                        <h6 class="mt-0">我喜欢的音乐</h6>
                        <p><small>457首</small>
                        </p>
                    </div>
                </div>
                <div class="media">
                    <img src="http://p1.music.126.net/H0HPgtvFyo_OjRUI-OpeTg==/109951169725885323.jpg?param=40y40"
                        class="mr-3 w-25" alt="...">
                    <div class="media-body">
                        <h6 class="mt-0">2024</h6>
                        <p><small>521首</small>
                        </p>
                    </div>
                </div>
                <div class="media">
                    <img src="http://p2.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=62y62"
                        class="mr-3 w-25" alt="...">
                    <div class="media-body">
                        <h6 class="mt-0">张惠妹aMEI</h6>
                        <p><small>台湾歌手张惠妹</small>
                        </p>
                    </div>
                </div>
                <i class="bi bi-triangle"></i><strong>收藏的歌单</strong>
                <div class="media">
                    <img src="http://p1.music.126.net/jjjqHYoelAqD_ACk0esKOA==/109951168242093318.jpg?param=40y40"
                        class="mr-3 w-25" alt="...">
                    <div class="media-body">
                        <h6 class="mt-0">AISHINI</h6>
                        <p><small>554首</small>
                        </p>
                    </div>
                </div>
                <div class="media">
                    <img src="http://p1.music.126.net/0aYAWEQ5nYt4tlidv-S85w==/109951170735145277.jpg?param=40y40"
                        class="mr-3 w-25" alt="...">
                    <div class="media-body">
                        <h6 class="mt-0">今天从...</h6>
                        <p><small>35首</small>
                        </p>
                    </div>
                </div>
                <div class="media">
                    <img src="http://p1.music.126.net/1UsR-nnU7dkt4tZmvBef9w==/109951165451036641.jpg?param=40y40"
                        class="mr-3 w-25" alt="...">
                    <div class="media-body">
                        <h6 class="mt-0">Angelanet</h6>
                        <p><small>210首by Angelanet</small>
                        </p>
                    </div>
                </div>
            </div>
            <!--我喜欢的音乐-->
            <div class="col-9 border">
                <div class=" my-3" style="max-width: 540px;">
                    <div class="row no-gutters">
                        <div class="col-md-4">
                            <img src="https://p1.music.126.net/R0ZxjtNEhX4v4ynTRIKeiQ==/109951165455068302.jpg?param=200y200"
                                class="card-img" alt="...">
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h5 class="card-title mx-3" id="nin">我喜欢的音乐</h5>
                                <p class="card-text"><small class="text-muted"><img class="w-25 px-3"
                                            src="http://p1.music.126.net/s4_dCrjfDLKyNiaqAMZsxg==/109951170058690909.jpg?param=200y200"
                                            alt="">2021-04-21创建</small></p>

                                <div class="mx-0 small">
                                    <button type="button" class="btn btn-primary btn-lg px-4"><i
                                            class="bi bi-skip-end-circle"></i>播放<i class="bi bi-plus"></i></button>
                                    <button type="button" class="btn btn-outline-secondary px-2"><i
                                            class="bi bi-folder-plus"></i>（969）</button>
                                    <button type="button" class="btn btn-outline-secondary px-2"><i
                                            class="bi bi-box-arrow-up-right"></i>（99）</button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="border-bottom border-danger">
                        <h5><strong>热门推荐</strong></h5>
                    </div>
                    <div class="col border">
                        <ul class="nav nav-tabs">
                            <li class="nav-item my-2">
                                <a class="nav-link active" href="#">歌曲标题</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link disabled my-2">歌手</a>
                            </li>
                        </ul>
                        <table class="table table-striped table-sm table-borderless small text-left text-secondary">
                            <tr class="table-secondary"></tr>
                            <tr>
                            <tr class="table-secondary">
                                <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                    Rain affter Summer
                                </td>
                            </tr>
                            <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                inspire
                            </td>
                            <tr class="table-secondary">
                                <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                    Hyacinth
                                </td>
                            </tr>
                            <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                my soul
                            </td>
                            <tr class="table-secondary">
                                <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                    Best Moments
                                </td>
                            </tr>
                            <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                Lost Love
                            </td>
                            <tr class="table-secondary">
                                <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                    beyond the memory
                                </td>
                            </tr>
                            <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                Lost Love
                            </td>
                            <tr class="table-secondary">
                                <td><i class="bi bi-fast-forward-circle mx-2"></i>
                                    beyond the memory
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!--尾栏-->
    <div style="background-color: #444444;">
        <div class="container py-3">
            <div class="col d-flex justify-content-center text-secondary" id="weiwei"><small>
                    <p> 服务条款| 隐私政策| 儿童隐私政策| 版权投诉| 投资者关系| 广告合作 |联系我们</p>
                    <div class="col d-flex justify-content-center text-white" id="weiwei"><small>
                    </div>
                    <p>互联网宗教信息服务许可证：浙（2022）0000120 增值电信业务经营许可证：浙B2-20150198 粤B2-20090191-18 浙ICP备15006616号-4
                        工业和信息化部备案管理系统网站
                    </p>
            </div>
            </small>
        </div>
    </div>
</body>

</html>